<template>
  <div class="recommendMain">
    <div class="recommendBox">
      <h2>推荐模型</h2>
      <div class="itemItem clearfix" v-for="(item, index) in list" :key="index">
        <div class="image">
          <img :src="item.imageUrl" alt="">
        </div>
        <div class="info">
          <h3 class="ellipsis">{{item.name}}</h3>
          <p>{{item.categoryAncestorsName}}</p>
<!--          <span>{{item.modelCollectCount}}人已收藏</span>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {listRecommendForModelDetail} from '@/api/model/info'
export default {
  name: '',
  props: {
    modelBasicInfoId:{
      type:String,
      required:false,
    },

  },
  components: {},
  data() {
    return {
      list:[],
      queryParams:{
        modelId:'',
        pageNum: 1,
        pageSize: 10,
      }
    }
  },
  computed: {},
  watch: {
    modelBasicInfoId: {
      handler(val){
        this.getList(val);
      },
      deep: true
    }
  },
  created() {
    console.log('ssss',this.modelInfo)
  },
  mounted() {
  },
  methods: {
   async getList(id){
     const res = await listRecommendForModelDetail(id);
     if(res.code === 200){
       this.list = res.data;
     }
    }
  },
}
</script>
<style lang="scss" scoped>
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommendBox {
  border-bottom: 2px solid #f1f1f1;
  padding-bottom: 24px;
  padding-top: 24px;

  > h2 {
    font-size: 16px;
    color: #07111b;
    font-weight: 700;
    margin: 0 0 24px;
  }

  .itemItem {
    margin-top: 24px;

    &:first-of-type {
      margin-top: 0px;
    }

    .image {
      width: 140px;
      height: 78px;
      overflow: hidden;
      border-radius: 4px;
      float: left;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .info {
      width: calc(100% - 150px);
      float: right;

      h3 {
        font-size: 14px;
        color: #4d555d;
        line-height: 20px;
        font-weight: 400;
        margin: 5px 0 4px;
      }

      p {
        font-size: 12px;
        color: #93999f;
        line-height: 20px;
        font-weight: 200;
        margin: 0;
        padding: 2px 0;
      }

      span {
        font-size: 14px;
        color: #999;
      }
    }
  }
}
</style>
